﻿@{
    ViewBag.Title = "Thay đổi mật khẩu";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div style="background-color: white; width: 100%; min-height: 511px">
    <table style="background-color: white">
        <tr style="vertical-align: top">
            <td style="max-width: 400px">
                @Html.Partial("~/Views/Shared/_CustomerMenu.cshtml")
            </td>
            <td>
                <h2 style="font-weight: bold; text-align: center">Thay đổi mật khẩu</h2>
                <div>
                    <table class="table border" style="text-align: left; border-radius: 3px; background-color: lightyellow; max-width: 650px; margin: 0px 0px 0px 30px">
                        <tr>
                            <th>Mật khẩu hiện tại (*)
                            </th>
                            <td>
                                <input type="password" class="text-box" maxlength="20" value="" placeholder="Nhập mật khẩu hiện tại" id="txtOldPassword" name="txtOldPassword" />
                            </td>
                        </tr>
                        <tr>
                            <th>Mật khẩu mới (*)
                            </th>
                            <td>
                                <input type="password" class="text-box" maxlength="20" value="" placeholder="Nhập mật khẩu mới" id="txtNewPassword" name="txtNewPassword" />
                            </td>
                        </tr>
                        <tr>
                            <th>Xác nhận mật khẩu mới (*)
                            </th>
                            <td>
                                <input type="password" class="text-box" maxlength="20" value="" placeholder="Nhập lại mật khẩu mới" id="txtConfirmNewPassword" name="txtConfirmNewPassword" />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" style="text-align: center">
                                <button class="metro button1" onclick="ChangePassword()">Thay đổi</button>
                            </td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</div>
<script>
    function ChangePassword() {
        var oldPass = $("#txtOldPassword").val();
        var newPass = $("#txtNewPassword").val();
        var confirmPass = $("#txtConfirmNewPassword").val();
        if ((oldPass == "") || (newPass == "") || (confirmPass == "")) {
            alert('Các mục (*) không thể để trống!');
        } else if (newPass != confirmPass) {
            alert('Mật khẩu mới và xác nhận mật khẩu không giống nhau!');
        } else if (newPass.length < 6) {
            alert('Mật khẩu mới tối thiểu phải có 6 kí tự!');
        } else if ((oldPass != "") && (newPass != "") && (confirmPass != "") && (newPass == confirmPass) && (newPass.length >= 6)) {
            $.ajax({
                url: '/Customer/SubmitChangePassword',
                type: 'POST',
                data: { oldPass: oldPass, newPass: newPass },
                success: function (response) {
                    if (response == "changeSuccessful") {
                        alert("Bạn đã thay đổi mật khẩu thành công!");
                    } else if (response == "Fail") {
                        alert('Mật khẩu hiện tại không đúng!');
                    }
                    if (response == "changeSuccessful") {
                        window.location.href = '/Home/Customer';
                    }
                }
            });
        }
    }
</script>
<style>
    .text-box {
        background: white;
        border: 1px solid #ffa853;
        box-shadow: 0 0 1px 1px #ffa853;
        color: #666;
        outline: none;
        height: 25px;
        width: 155px;
    }

    .metro .button1 {
        -moz-box-shadow: 3px 4px 0px 0px #899599;
        -webkit-box-shadow: 3px 4px 0px 0px #899599;
        box-shadow: 3px 4px 0px 0px #899599;
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #bab1ba));
        background: -moz-linear-gradient(top, #ededed 5%, #bab1ba 100%);
        background: -webkit-linear-gradient(top, #ededed 5%, #bab1ba 100%);
        background: -o-linear-gradient(top, #ededed 5%, #bab1ba 100%);
        background: -ms-linear-gradient(top, #ededed 5%, #bab1ba 100%);
        background: linear-gradient(to bottom, #ededed 5%, #bab1ba 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#bab1ba',GradientType=0);
        background-color: #ededed;
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
        border-radius: 15px;
        border: 1px solid #d6bcd6;
        display: inline-block;
        cursor: pointer;
        color: #3a8a9e;
        font-family: arial;
        font-size: 15px;
        padding: 0px 18px;
        text-decoration: none;
        text-shadow: 0px 1px 0px #e1e2ed;
        height: 30px;
    }

        .metro .button1:hover {
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bab1ba), color-stop(1, #ededed));
            background: -moz-linear-gradient(top, #bab1ba 5%, #ededed 100%);
            background: -webkit-linear-gradient(top, #bab1ba 5%, #ededed 100%);
            background: -o-linear-gradient(top, #bab1ba 5%, #ededed 100%);
            background: -ms-linear-gradient(top, #bab1ba 5%, #ededed 100%);
            background: linear-gradient(to bottom, #bab1ba 5%, #ededed 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bab1ba', endColorstr='#ededed',GradientType=0);
            background-color: #bab1ba;
        }

        .metro .button1:active {
            position: relative;
            top: 1px;
        }
</style>
